<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
			<style>
				/* 练习：1.圆形 2.正三角形
								思路1：宽高与边框倒角一致
								思路2：div#triangle 
								 css中：抓div 
								左边框：50像素实线红色
								右边框：50像素实线黄色
								下边框：50像素实线黑色
								注意：先别加宽高 tranparentv 透明色
								                 
								*/
							   div#cirle{
								   width: 400px;
								   height: 400px;
								   border: 1px solid red;
								   border-radius:50%;
								    /* 边框阴影 box-shadow属性*/
									box-shadow: 5px 5px 50px 50px red inset;
							   }
							  div#triangle{
								   width: 0;
				  /* border-bottom:50px solid blue ;
				   border-left:50px solid transparent;
				   border-right:50px solid transparent; */
				   
				   /* 两行：倒三角，蓝色 透明度 .3
					 提醒：所有边框：50px solid transaprent
					       上边框颜色改成蓝色 0，0，255
					*/
				   border:50px solid transparent;
				   border-top-color:rgba(0,0,255,.3);   
							   }
							  
							  /* outline 边框轮廓 只针对input 元素*/
							  input{
								  outline: 0px solid black;
							  }
							  /* 实际应用：通配选择器 去掉轮廓
							   *{ outline：0}
							   */
			</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>